<template>
	<view class="content">
		<!-- 轮播图 -->
		<view class="title">
			<swiper autoplay="true" interval="3000" indicator-dots="true" circular="true">
			  <swiper-item>
			    <image src="/static/lunbo/lb1.jpg" />
			  </swiper-item>
			  <swiper-item>
			    <image src="/static/lunbo/lb2.jpg" />
			  </swiper-item>
			  <swiper-item>
			    <image src="/static/lunbo/lb3.jpg" />
			  </swiper-item>
			</swiper>
		</view>
		
		<!-- 通知 -->
		<view class="iconfont icon-laba" id="info">
			<image  class="note" src="/static/images/通知.png"></image>
			<text style="padding-left: 23px; position: absolute;" >重要通知！！！</text>
			
		</view>
		
		<!-- 业务功能 -->
		<view class="mid">
			<view class="item" >
				<image class="kdtake" src="../../static/images/代取快递.png"/>
				<view class="text"  style="height: 10px; padding-bottom: 4px;">快递代取</view>
			</view>
			
			<view class="item" @click="navigateTo('/pages/errands/errands')" >
				<image class="run" src="../../static/images/校园跑腿.png"  />
				<view class="text"  style="height: 10px; padding-bottom: 4px;">校园跑腿</view>
			</view>
			
			<view class="item">
				<image class="kdsend" src="../../static/images/快递代寄.png"/>
				<view class="text" style="height: 10px; padding-bottom: 4px;">快递代寄</view>
			</view>
			
			<view class="item">
				<image class="rent" src="../../static/images/租赁服务.png"></image>
				<view class="text" style="height: 10px; padding-bottom: 4px;">租借服务</view>
			</view>
			
			<view class="item">
				<image class="game" src="../../static/images/游戏陪玩.png"></image>
				<view class="text" style="height: 10px; padding-bottom: 4px;">游戏陪玩</view>
			</view>
			
			<view class="item">
				<image class="send" src="../../static/images/帮我送.png" ></image>
				<view class="text" style="height: 10px; padding-bottom: 4px;">帮我送</view>
			</view>
			
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			navigateTo(url) {
				uni.navigateTo({
					url
				})
			}

		},
		created() {
			
		},
		
	}
</script>

<style lang="scss" scoped>
	.content{
		background-color: #eee;
		width:100%;
		height:100vh;
	}
	swiper{
		width:100%;
		height: 400rpx;
	}
	swiper image{
		width:100%;
		height: 400rpx;
	}
	#info{
		margin: 10px;
		background-color: #fff;
		border-radius: 40px;
		height:70rpx;
		font-size: 36rpx;
		line-height: 60rpx;
		text{
			padding-left: 5px;
		}
	}
	.icon-laba{
		padding:0 8px 0 8px;
		display: flex;
		align-items: center;

	}
	.note{
		width: 20px;
		height: 20px;
		margin-right: 10px;
		position: absolute;
		// position: absolute;
		// left: 20px;
		// padding-top: 15px;
		// padding-left: 3px;
	}
	.mid{
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		height:300px;
		// background: skyblue;
		.item{
			display: flex;
			flex-direction: column;
			align-items: center;
			height:65px;
			width:65px;
			margin: 10px;
			padding: 10px;
			border: 1px solid #ccc;
			border-radius: 5px;
			background-color: #f9f9f9;
			text-align: center;
			.kdtake{
				width: 60px;
				height: 60px;
				align-items: center;
				text-align: center;
				// margin-le
				// display: inline-block;
			}
			.kdsend{
				width: 60px;
				height: 60px;
				align-items: center;
				text-align: center;
			}
			.run{
				width: 60px;
				height: 60px;
				align-items: center;
				text-align: center;
			}
			.rent{
				width: 60px;
				height: 60px;
				align-items: center;
				text-align: center;
			}
			.game{
				width: 60px;
				height: 60px;
				align-items: center;
				text-align: center;
			}
			.send{
				width: 60px;
				height: 60px;
				align-items: center;
				text-align: center;
			}
		}
		.iconfont{
			font-size: 2em; 
			margin-bottom: 10px;
			
		}
	
	}
</style>
